Javascript Slidedown Menü integrieren
Eingetragen von masterlampe (4)am 12.07.2010 - 19:10 Uhr in
Hi Drupaler,
ich bin gerade am erstellen einer Drupalseite und muss mich noch am Menü schaffen. Habe schon Nice Menüs und Superfish probiert, aber war beides nicht ganz mein Wunsch jetzt habe ich ein Slidedown Menü in Javascript gefunden und möchte dieses einbauen. Bräuchte da mal kurz Tipps, wie ich das am besten mache.
Das gewünschte Menü ist auf http://www.dhtmlgoodies.com/scripts/slidedown-menu2/slidedown-menu2.html zu sehen und der Quelltext wird auch angezeigt.
Ich möchte damit das Standardmenü überschreiben. Wie ich es jetzt verstanden habe, packe ich die CSS-Befehle in meine system-menues.css und das Javascript??? Wo müsste ich dann den html-Code eingeben? Ist das ganze überhaupt umsetzbar? Vielleicht lieber auf Basis von Superfish oder so?
Danke für eure Hilfe!!!
- Anmelden oder Registrieren um Kommentare zu schreiben
implementation javaskript menüs
am 12.07.2010 - 20:32 Uhr
Die implementation ist möglich, wenn auch etwas umständlich für einsteiger.
CSS:
in deinem theme order befinden sich dateien für css, dort fügst du den css code für dein menü ein.
Dieser code muss noch angepasst werden.
Menü:
für das menü verwendest du ein modul das den menü title link als .class benutzt "vereinfacht die implementierung"
javascript: in deinem theme ordner befindet sich eine datei "scripts.js" dort fügst du den javascript code ein.
falls die datei nicht vorhanden ist musst du sie in "dein theme name.info " aktivieren.
implementation:
installiere das modul
menu_css_names
erstelle als nächstes hirachisch dein menü so wie du es gerne hättest
dann passt du dem entsprechend dein css code an
bsp:
"#dhtmlgoodies_slidedown_menu li"
ersetzt du durch
"#deinmenüname li"
hierbei kann dir firebug eine große hilfe sein.
sorry für die kurtze anleitung soll dich aber auch nur auf den richtigen weg bringen.
Etwas Hilfe bitte noch!!!
am 13.07.2010 - 13:43 Uhr
Hi,
also, ich habe zuerst einmal den Javascript teil in die script.js importiert, welche ich auch in der info verlinkt habe. Muss ich in die .js noch einen Header oder sowas reinschreiben oder genügt das so?
P.S. Unten geht's noch weiter mit dem Post!
var expandFirstItemAutomatically = false; // Expand first menu item automatically ?
var initMenuIdToExpand = false; // Id of menu item that should be initially expanded. the id is defined in the
var expandMenuItemByUrl = true; // Menu will automatically expand by url - i.e. if the href of the menu item is in the current location, it will expand
var initialMenuItemAlwaysExpanded = true; // NOT IMPLEMENTED YET
var dhtmlgoodies_slmenuObj;
var divToScroll = false;
var ulToScroll = false;
var divCounter = 1;
var otherDivsToScroll = new Array();
var divToHide = false;
var parentDivToHide = new Array();
var ulToHide = false;
var offsetOpera = 0;
if(navigator.userAgent.indexOf('Opera')>=0)offsetOpera=1;
var slideMenuHeightOfCurrentBox = 0;
var objectsToExpand = new Array();
var initExpandIndex = 0;
var alwaysExpanedItems = new Array();
function popMenusToShow()
{
var obj = divToScroll;
var endArray = new Array();
while(obj && obj.tagName!='BODY'){
if(obj.tagName=='DIV' && obj.id.indexOf('slideDiv')>=0){
var objFound = -1;
for(var no=0;no=0){
otherDivsToScroll.splice(objFound,1);
}
}
obj = obj.parentNode;
}
}
function showSubMenu(e,inputObj)
{
if(this && this.tagName)inputObj = this.parentNode;
if(inputObj && inputObj.tagName=='LI'){
divToScroll = inputObj.getElementsByTagName('DIV')[0];
for(var no=0;no0){
if(divToScroll){
if(otherDivsToScroll.length>0){
popMenusToShow();
}
if(otherDivsToScroll.length>0){
autoHideMenus();
hidingInProcess = true;
}
}
}
if(divToScroll && !hidingInProcess){
divToScroll.style.display='';
otherDivsToScroll.length = 0;
otherDivToScroll = divToScroll.parentNode;
otherDivsToScroll.push(divToScroll);
while(otherDivToScroll && otherDivToScroll.tagName!='BODY'){
if(otherDivToScroll.tagName=='DIV' && otherDivToScroll.id.indexOf('slideDiv')>=0){
otherDivsToScroll.push(otherDivToScroll);
}
otherDivToScroll = otherDivToScroll.parentNode;
}
ulToScroll = divToScroll.getElementsByTagName('UL')[0];
if(divToScroll.style.height.replace('px','')/1<=1)scrollDownSub();
}
return false;
}
function autoHideMenus()
{
if(otherDivsToScroll.length>0){
divToHide = otherDivsToScroll[otherDivsToScroll.length-1];
parentDivToHide.length=0;
var obj = divToHide.parentNode.parentNode.parentNode;
while(obj && obj.tagName=='DIV'){
if(obj.id.indexOf('slideDiv')>=0)parentDivToHide.push(obj);
obj = obj.parentNode.parentNode.parentNode;
}
var tmpHeight = (divToHide.style.height.replace('px','')/1 - slideMenuHeightOfCurrentBox);
if(tmpHeight<0)tmpHeight=0;
if(slideMenuHeightOfCurrentBox)divToHide.style.height = tmpHeight + 'px';
ulToHide = divToHide.getElementsByTagName('UL')[0];
slideMenuHeightOfCurrentBox = ulToHide.offsetHeight;
scrollUpMenu();
}else{
slideMenuHeightOfCurrentBox = 0;
showSubMenu();
}
}
function scrollUpMenu()
{
var height = divToHide.offsetHeight;
height-=15;
if(height<0)height=0;
divToHide.style.height = height + 'px';
for(var no=0;no0){
setTimeout('scrollUpMenu()',5);
}else{
divToHide.style.display='none';
otherDivsToScroll.length = otherDivsToScroll.length-1;
autoHideMenus();
}
}
function scrollDownSub()
{
if(divToScroll){
var height = divToScroll.offsetHeight/1;
var offsetMove =Math.min(15,(ulToScroll.offsetHeight - height));
height = height +offsetMove ;
divToScroll.style.height = height + 'px';
for(var no=1;no0 && initExpandIndex<(objectsToExpand.length-1)){
initExpandIndex++;
showSubMenu(false,objectsToExpand[initExpandIndex]);
}
}
}
}
function initSubItems(inputObj,currentDepth)
{
divCounter++;
var div = document.createElement('DIV'); // Creating new div
div.style.overflow = 'hidden';
div.style.position = 'relative';
div.style.display='none';
div.style.height = '1px';
div.id = 'slideDiv' + divCounter;
div.className = 'slideMenuDiv' + currentDepth;
inputObj.parentNode.appendChild(div); // Appending DIV as child element of
div.appendChild(inputObj); // Appending
to the div
var menuItem = inputObj.getElementsByTagName('LI')[0];
while(menuItem){
if(menuItem.tagName=='LI'){
var aTag = menuItem.getElementsByTagName('A')[0];
aTag.className='slMenuItem_depth'+currentDepth;
var subUl = menuItem.getElementsByTagName('UL');
if(subUl.length>0){
initSubItems(subUl[0],currentDepth+1);
}
aTag.onclick = showSubMenu;
}
menuItem = menuItem.nextSibling;
}
}
function initSlideDownMenu()
{
dhtmlgoodies_slmenuObj = document.getElementById('menu');
dhtmlgoodies_slmenuObj.style.visibility='visible';
var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0];
var mainMenuItem = mainUl.getElementsByTagName('LI')[0];
mainItemCounter = 1;
while(mainMenuItem){
if(mainMenuItem.tagName=='LI'){
var aTag = mainMenuItem.getElementsByTagName('A')[0];
aTag.className='slMenuItem_depth1';
var subUl = mainMenuItem.getElementsByTagName('UL');
if(subUl.length>0){
mainMenuItem.id = 'mainMenuItem' + mainItemCounter;
initSubItems(subUl[0],2);
aTag.onclick = showSubMenu;
mainItemCounter++;
}
}
mainMenuItem = mainMenuItem.nextSibling;
}
if(location.search.indexOf('mainMenuItemToSlide')>=0){
var items = location.search.split('&');
for(var no=0;no=0){
values = items[no].split('=');
showSubMenu(false,document.getElementById('mainMenuItem' + values[1]));
initMenuIdToExpand = false;
}
}
}else if(expandFirstItemAutomatically>0){
if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){
showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically));
initMenuIdToExpand = false;
}
}
if(expandMenuItemByUrl)
{
var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A');
for(var no=0;no=0 && hrefToCheckOn.indexOf('#')0){
objectsToExpand.unshift(obj);
}
}
obj = obj.parentNode;
}
showSubMenu(false,objectsToExpand[0]);
break;
}
}
}
if(initMenuIdToExpand)
{
objectsToExpand = new Array();
var obj = document.getElementById(initMenuIdToExpand)
while(obj && obj.id!='menu'){
if(obj.tagName=='LI'){
var subUl = obj.getElementsByTagName('UL');
if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
if(subUl.length>0){
objectsToExpand.unshift(obj);
}
}
obj = obj.parentNode;
}
showSubMenu(false,objectsToExpand[0]);
}
}
Dann habe ich in meine theme.css den css-Code eingefügt. Mein menu soll einfach menu als css-Name haben. Habe außerdem das menu_name_css Modul installiert.
Jetzt noch meine Frage? Muss ich nicht irgendwie die css mit dem Javascript verbinden, sonst weiß er doch gar nicht, dass er das verwenden soll? Wo genau müsste diese Anweisung erscheinen? In der page.tpl.php oder so? Das verwirrt mich etwas, da bisher noch nichts zu erkennen ist, dass er etwas ändert.
Des weiteren habe ich an meinem Menü nichts verändert, da drupal momentan das Standardmenü korrekt anzeigt. Das passt dann so, oder?
Würde mich sehr freuen, wenn ich dazu nochmal Infos bekommen könnte!!!